<template>
  <div class="page personState">
    <el-form ref="form" :model="form">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人陈述表</span>
      </div>
      <div>
        <p class="p_title">本表由申报者在线填写，在线打印自动生成的文档。申报者、监护人须在指定位置签名确认。申报者将填写完整的表格扫描上传至申报系统，完成提交。自制申报表无效，不接受以电子邮件或传真方式提交的申报表。</p>
      </div>
      <div class="table">
        <h2>第十八届“明天小小科学家”奖励活动</h2>
        <h4>申报表三：个人陈述表（必填）</h4>
        <div>
          
        </div>
        <div class="table_grounp">
          <h4>A、你的兴趣和爱好</h4>
          <table width="100%">
            <tr>
              <td>最喜欢的课程</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='favoriteCourses'>
                    <el-input v-model="form.favoriteCourses"></el-input>
                  </el-form-item>
              </td>
              <td>最不喜欢的课程</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='dislikeCourses'>
                    <el-input v-model="form.dislikeCourses"></el-input>
                  </el-form-item>
              </td>
            </tr>
            <tr>
              <td>中学阶段爱好</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='middleSchoolHobby'>
                    <el-input v-model="form.middleSchoolHobby"></el-input>
                  </el-form-item>
              </td>
              <td>综合素养测试成绩</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='colligateScore'>
                    <el-input disabled v-model="form.colligateScore"></el-input>
                  </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="box_input">
                  <div class="box_input__title">
                    请列出你参加的所有社团活动、志愿服务、文学创作、学校或班级学生工作等情况（150字以内）
                  </div>
                  <div class="box_input__body">
                    <el-form-item :required="required" :show-message="false" prop='experienceSituation'>
                      <el-input 
                      type="textarea"
                      :maxlength="150"
                      :autosize="{ minRows: 5, maxRows: 5}"
                      v-model="form.experienceSituation"/>
                      <span class="lenght">{{experienceSituation}}/150</span>
                    </el-form-item>
                  </div>
                </div>
                <div class="box_input">
                  <div class="box_input__title">
                    过去三个寒暑假你做了什么？（500字以内）
                  </div>
                  <div class="box_input__body">
                    <el-form-item :required="required" :show-message="false" prop='vacationDoing'>
                      <el-input 
                      type="textarea"
                      :maxlength="500"
                      :autosize="{ minRows: 10, maxRows: 15}"
                      v-model="form.vacationDoing"/>
                      <span class="lenght">{{vacationDoing}}/500</span>
                    </el-form-item>
                  </div>
                </div>
              </td>
              
            </tr>
          </table>
        </div>
        <div class="table_grounp">
          <h4>B、你的未来规划</h4>
          <table width="100%">
            
            <tr>
              <td>希望就读的大学</td>
              <td colspan="6">
              <el-form-item :required="required" :show-message="false" prop='university'>
                    <el-input v-model="form.university"></el-input>
                  </el-form-item>
              
              </td>
              
            </tr>
            <tr>
              <td>希望学习的专业</td>
              <td colspan="6">
                <el-form-item :required="required" :show-message="false" prop='profession'>
                  <el-input v-model="form.profession"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>希望从事的职业</td>
              <td colspan="6">
                <el-form-item :required="required" :show-message="false" prop='occupation'>
                  <el-input v-model="form.occupation"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td colspan="6">
                <div class="box_input">
                  <div class="box_input__title">
                   未来10~15年你有什么计划？（150字以内）
                  </div>
                  <div class="box_input__body">
                    <el-form-item :required="required" :show-message="false" prop='longPlan'>
                      <el-input 
                      type="textarea"
                      :maxlength="150"
                      :autosize="{ minRows: 5, maxRows: 5}"
                      v-model="form.longPlan"/>
                      <span class="lenght">{{longPlan}}/150</span>
                    </el-form-item>
                  </div>
                </div>
              
              </td>
              
            </tr>
          </table>
        </div>
        <div class="table_grounp">
          <h4>C、你参加过的科技活动</h4>
          <div class="box_input">
            <div class="box_input__title">
              你参加过上海市科学技术协会组织的科技竞赛活动有哪些？
            </div>
            <div class="box_input__body">
              
              <el-form-item :required="required" :show-message="false" prop='filingExplainBody.explainC1'>
                <el-input 
                type="textarea"
                :maxlength="150"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="form.filingExplainBody.explainC1"/>
                <span class="lenght">{{explainC1}}/150</span>
              </el-form-item>
            </div>
          </div>
          <div class="box_input">
            <div class="box_input__title">
              请列出你参加过的其他科技实践活动情况：（150字以内）
            </div>
            <div class="box_input__body">
              <el-form-item :required="required" :show-message="false" prop='filingExplainBody.explainC2'>
                <el-input 
                type="textarea"
                :maxlength="150"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="form.filingExplainBody.explainC2"/>
                <span class="lenght">{{explainC2}}/150</span>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="table_grounp">
          <h4>D、请列出你获得的重要的奖项或专业认证</h4>
          
          <el-input
          type="textarea"
          :autosize="{ minRows: 15, maxRows: 15}"
          v-model="form.filingExplainBody.explainD"
          />
        </div>
        <div class="table_grounp">
          <h4>E、如何看待科学研究事业（150字以内）</h4>
          <el-form-item :required="required" :show-message="false" prop='filingExplainBody.explainE'>
                <el-input 
                type="textarea"
                :maxlength="150"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="form.filingExplainBody.explainE"/>
                <span class="lenght">{{explainE}}/150</span>
              </el-form-item>
        </div>
        <div class="table_grounp">
          <h4>F、请描述一下你所熟悉的科学研究人员（150字以内）</h4>
           <el-form-item :required="required" :show-message="false" prop='filingExplainBody.explainF'>
                <el-input 
                type="textarea"
                :maxlength="150"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="form.filingExplainBody.explainF"/>
                <span class="lenght">{{explainF}}/150</span>
              </el-form-item>
          
        </div>
        <div class="table_grounp">
          <h4>G、谁在科学研究方面对你影响最大</h4>
          <table width="100%">
            <tr>
              <td>姓名</td>
              <td >
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentName'>
                    <el-input v-model="form.filingExplainBody.influentName"></el-input>
                  </el-form-item>
              </td>
              <td>性别</td>
              <td >
                <el-select v-model="form.filingExplainBody.influentSex" placeholder="请选择">
                  <el-option
                    v-for="item in sex"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>地区</td>
              <td >
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentArea'>
                    <el-input v-model="form.filingExplainBody.influentArea"></el-input>
                  </el-form-item>
              </td>
              <td>专业</td>
              <td>
              <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentProfession'>
                    <el-input v-model="form.filingExplainBody.influentProfession"></el-input>
                  </el-form-item>
              </td>
            </tr>
            <tr>
              <td>单位</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentUnit'>
                    <el-input v-model="form.filingExplainBody.influentUnit"></el-input>
                  </el-form-item>
              </td>
              <td>职务</td>
              <td >
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentPosition'>
                    <el-input v-model="form.filingExplainBody.influentPosition"></el-input>
                  </el-form-item>
              </td>
              <td>职称</td>
              <td >
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentTitle'>
                    <el-input v-model="form.filingExplainBody.influentTitle"></el-input>
                  </el-form-item>
              </td>
            </tr>
            <tr>
              <td>职位</td>
              <td colspan="7">
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentOccupation'>
                    <el-input v-model="form.filingExplainBody.influentOccupation"></el-input>
                  </el-form-item>
              </td>
            </tr>
            <tr>
              <td>办公电话</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentOfficephone'>
                    <el-input v-model="form.filingExplainBody.influentOfficephone"></el-input>
                  </el-form-item>
              </td>
              <td>移动电话</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentMobile'>
                    <el-input v-model="form.filingExplainBody.influentMobile"></el-input>
                  </el-form-item>
              </td>
            </tr>
            <tr>
              <td>电子邮箱</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentEmail'>
                    <el-input v-model="form.filingExplainBody.influentEmail"></el-input>
                  </el-form-item>
              </td>
              <td>关系</td>
              <td colspan="3">
                <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentRelation'>
                    <el-input v-model="form.filingExplainBody.influentRelation"></el-input>
                  </el-form-item>
              </td>
            </tr>
          </table>
        </div>
        <div class="table_grounp">
          <h4>H、他/她对你产生了什么影响（150字以内）</h4>
          <el-form-item :required="required" :show-message="false" prop='filingExplainBody.influentDescrible'>
                <el-input 
                type="textarea"
                :maxlength="150"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="form.filingExplainBody.influentDescrible"/>
                <span class="lenght">{{influentDescrible}}/150</span>
              </el-form-item>
         
        </div>
        <div class="table_grounp">
          <h4>I、你对未来哪些科学问题比较关心（800字以内）</h4>
          <el-form-item :required="required" :show-message="false" prop='filingExplainBody.careSubject'>
                <el-input 
                type="textarea"
                :maxlength="800"
                :autosize="{ minRows: 15, maxRows: 15}"
                v-model="form.filingExplainBody.careSubject"/>
                <span class="lenght">{{careSubject}}/800</span>
              </el-form-item>
        </div>
        <div class="table_grounp">
          <h4>J、你如何评价自己（800字以内）</h4>
          <el-form-item :required="required" :show-message="false" prop='filingExplainBody.evaluateYourself'>
                <el-input 
                type="textarea"
                :maxlength="800"
                :autosize="{ minRows: 15, maxRows: 15}"
                v-model="form.filingExplainBody.evaluateYourself"/>
                <span class="lenght">{{evaluateYourself}}/800</span>
              </el-form-item>
        </div>
        <div class="table_grounp">
          <h4>K、你认为自己具备哪些从事科技研究工作的特质（800字以内）</h4>
          <el-form-item :required="required" :show-message="false" prop='filingExplainBody.behave'>
                <el-input 
                type="textarea"
                :maxlength="800"
                :autosize="{ minRows: 15, maxRows: 15}"
                v-model="form.filingExplainBody.behave"/>
                <span class="lenght">{{behave}}/800</span>
              </el-form-item>
        </div>
        <h4 style="font-size:16px;">
          我确认上述内容属实。
        </h4>
        <div class="form">
          <div class="form_box">
            <div>
              <span>申报者签名（手写）：</span><input type="text" disabled>
            </div>
           
          </div>
          <div class="form_box">
            <div>
              <span>日期（手写）：</span><input type="text" disabled>
              <span>年</span><input type="text" disabled>
              <span>月</span><input type="text" disabled>
              <span>日</span>
            </div>
           
          </div>
        </div>
        <div style="text-align:center; margin:20px 0;">
          <el-button @click="pevs" type="primary" size="mini">上一步</el-button>
          <el-button @click="save" type="primary" size="mini">保存</el-button>
          <el-button @click="nexts" type="primary" size="mini">下一步</el-button>
          <div style="font-size:14px; margin-top:20px;">
            <small>请先保存再进行下一步操作</small>
          </div>
        </div>
      </div>
    </el-card>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import { pev, next } from "@/function/pevNext/pevNext.js";
import { PersonalStatement } from "@/function/formTable/formTable.js";
import { get_PersonalStatement } from "@/function/formTable/getFormTable.js";
export default {
  computed: {
    experienceSituation() {
      return this.form.experienceSituation !== null ? this.form.experienceSituation.length : 0
    },
    vacationDoing() {
      return this.form.vacationDoing !== null ? this.form.vacationDoing.length : 0
    },
    longPlan() {
      return this.form.longPlan !== null ?  this.form.longPlan.length : 0
    },
    explainC1() {
      return this.form.explainC1 !== null ? this.form.filingExplainBody.explainC1.length : 0
    },
    explainC2() {
      return this.form.explainC2 !== null ? this.form.filingExplainBody.explainC2.length : 0
    },
    explainE() {
      return this.form.explainE !== null ? this.form.filingExplainBody.explainE.length : 0
    },
    explainF() {
      return this.form.explainF !== null ? this.form.filingExplainBody.explainF.length : 0
    },
    influentDescrible() {
      return this.form.filingExplainBody.influentDescrible !== null ? this.form.filingExplainBody.influentDescrible.length : 0
    },
    careSubject() {
      return this.form.filingExplainBody.careSubject !== null ? this.form.filingExplainBody.careSubject.length : 0
    },
    behave() {
      return this.form.filingExplainBody.behave !== null ? this.form.filingExplainBody.behave.length : 0
    },
    evaluateYourself() {
      return this.form.filingExplainBody.evaluateYourself !== null ? this.form.filingExplainBody.evaluateYourself.length : 0
    },
  },
  mounted() {
    get_PersonalStatement(this);
    this.$http.get("/filing/syn/score").then(res => {
      this.form.colligateScore = res.data.data[0].score;
    });
    
  },
  data() {
    return {
      required: true,
      sex: [
        {
          value: '男',
          label: '男'
        }, {
          value: '女',
          label: '女'
        }
      ],
      form: {
        favoriteCourses: "",
        dislikeCourses: "",
        middleSchoolHobby: "",
        experienceSituation: "",
        vacationDoing: "",
        university: "",
        profession: "",
        occupation: "",
        longPlan: "",
        colligateScore: "",
        filingExplainBody: {
          explainC1: "",
          explainC2: "",
          explainD: "",
          explainE: "",
          explainF: "",
          influentName: "",
          influentSex: "",
          influentArea: "",
          influentProfession: "",
          influentUnit: "",
          influentPosition: "",
          influentOccupation: "",
          influentTitle: "",
          influentOfficephone: "",
          influentMobile: "",
          influentEmail: "",
          influentRelation: "",
          influentDescrible: "",
          careSubject: "",
          evaluateYourself: "",
          behave: ""
        }
      }
    };
  },
  methods: {
    pevs() {
      pev(this);
    },
    nexts() {
      next(this);
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = this.form;
          PersonalStatement(this.form, this);
        } else {
          alert("请填写完整信息！");
          return false;
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
